<template>
  <div class="not-data-wrapper">
    <div class="not-data-main" @click="handleClick">
      <img :src="notDataImg"/>
      <p v-html="tipCopy"></p>
    </div>
  </div>
</template>

<script>
import notDataImg from './not-data.png'

const tips = [
  '喔噢，没找到数据',
  '没有数据~'
]
export default {
  props: [
    'tip'
  ],
  data () {
    return {
      notDataImg
    }
  },
  computed: {
    tipCopy () {
      return this.tip || tips[Math.floor(Math.random() * tips.length)]
    }
  },
  methods: {
    handleClick () {
      this.$emit('handleClick')
    }
  }
}
</script>

<style lang="stylus" scoped>
.not-data-wrapper
  width 100%
  height 100%
  text-align center
  font-size 16px
  padding-top 120px
.not-data-main
  display inline-block
  text-align center
  img
    width 90px
  p
    color #999
</style>

